
<template>
  <div class="app-container">
    <Row>
      <Col span="4" style="background-color:white;">
        <Tree :data="categoryData" expand="true" default-expand-all="true" @on-select-change="refreshTask" />
      </Col>
      <Col span="20" style="background-color:white;">
        <Card dis-hover class="task-card">
          <div class="app-container" style="background-color:white;">
            <el-row type="flex" justify="start">

              <el-form :inline="true" :model="queryForm" class="demo-form-inline" size="mini">
                <el-form-item label="类型">
                  <el-select v-model="queryForm.type" placeholder="请选择" clearable>
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>

                <el-form-item label="模型名称">
                  <el-input v-model="queryForm.modelName" clearable />
                </el-form-item>
                <el-form-item label="表名">
                  <el-input v-model="queryForm.tableName" clearable />
                </el-form-item>
                <el-form-item label="描述">
                  <el-input v-model="queryForm.description" clearable />
                </el-form-item>
                <el-form-item style="margin-left: 26px">
                  <el-button type="primary" @click="search">查询</el-button>
                  <el-button type="default" @click="reset">重置</el-button>
                </el-form-item>
              </el-form>
            </el-row>
            <el-row style="margin-bottom: 10px" />

            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <el-button type="primary" size="mini" @click="add('inner')">新增</el-button>
                <el-button type="success" size="mini" @click="add('external')">新增外部表</el-button>
              </div>
              <el-row style="margin-top: 10px">

                <el-col>
                  <el-table
                    :data="tableData"
                    size="mini"
                    style="width: 100%"
                    :height="tableHeight"
                    border
                  >
                    <el-table-column
                      fixed
                      prop="modelName"
                      label="实体名"
                      width="180"
                      show-overflow-tooltip
                    />
                    <el-table-column
                      prop="tableName"
                      label="表名"
                      show-overflow-tooltip
                    />
                    <el-table-column
                      prop="description"

                      label="描述"
                      show-overflow-tooltip
                    />
                    <el-table-column
                      prop="type"
                      label="类型"
                      show-overflow-tooltip
                    >
                      <template slot-scope="scope">
                        <el-tag v-if="scope.row.type == 'external'" type="warning">外部表</el-tag>
                        <el-tag v-else type="success">内部表</el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="groupName"
                      label="分组"
                      show-overflow-tooltip
                    />
                    <el-table-column
                      label="操作"
                      width="100"
                    >
                      <template slot-scope="scope">
                        <el-button size="mini" type="text" icon="el-icon-edit" @click="handleClick(scope.row)" />
                        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelClick(scope.row)" />
                      </template>
                    </el-table-column>
                  </el-table>
                  <el-row type="flex" justify="center">
                    <el-pagination
                      background
                      :current-page="queryForm.page"
                      :page-size="queryForm.pageSize"
                      layout="total, prev, pager, next, jumper"
                      :total="total"
                      @current-change="handleCurrentChange"
                    />
                  </el-row>

                </el-col>
              </el-row>
            </el-card>

          </div>
        </Card>
      </Col>

    </Row>
    <Row>
      <Col span="24">
        <footer />
      </Col>
    </Row>
  </div>

</template>

<script>
// eslint-disable-next-line no-unused-vars
import { getTaskData, getTaskChartData, getBpmnModelCategory } from '@/api/analy'
// eslint-disable-next-line no-unused-vars
import { getTypesByKey, getBusinessTableListJson, businessTableDel, businessTableGet } from '@/api/form'
import Footer from '../../../common/footer'

export default {
  name: 'Task',
  components: {
    // eslint-disable-next-line vue/no-unused-components
    Footer
  },

  data() {
    return {
      options: [{
        value: 'inner',
        label: '内部'
      }, {
        value: 'external',
        label: '外部'
      }],
      value: '',
      tableData: [],
      tableHeight: 450,
      queryDate: [],
      total: 0,
      chartVisible: false,
      chartData: {},
      sellerId: 0,
      shopName: [],
      queryForm: {
        groupId: '',
        modelName: '',
        type: '',
        description: '',
        tableName: '',
        page: 0,
        limit: 10
      },
      categoryData: [
      ]
    }
  },
  mount() {
    this.getData()
    this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop
  },
  created() {
    this.initData()
  },
  methods: {
    add: function(type) {
      // eslint-disable-next-line eqeqeq
      if (type == 'inner') {
        this.$router.push({ name: 'businessTableInnerAdd', query: { t: new Date().getTime(), 'operate': 'inner' }})
      } else {
        this.$router.push({ name: 'businessTableInnerAdd', query: { t: new Date().getTime(), 'operate': 'external' }})
      }
    },
    queryFormCreateTime: function(e) {
      this.queryForm.createTime = e
    },
    refreshTask: function(data) {
      // eslint-disable-next-line eqeqeq
      if (data[0].parentId == '-1') {
        this.queryForm.groupId = ''
      } else {
        this.queryForm.groupId = data[0].id
      }
      this.getData()
    },
    queryMethod: function() {
      // eslint-disable-next-line no-unused-vars
      var name = this.queryForm.name
      var whereSql = ''
      var createTime = this.queryForm.createTime
      if (createTime) {
        if (createTime[0]) {
          whereSql = "  CREATE_TIME_  between '" + createTime[0] + "' and " + "'" + createTime[1] + "'"
        }
      }
      this.queryForm.whereSql = whereSql
      getBusinessTableListJson(this.queryForm).then((response) => {
        this.tableData = response.data
        if (response.count.length > 0) {
          this.total = parseInt(response.count)
        } else {
          this.total = 0
        }
      })
    },
    getTypesByKeyAction: function() {
      getTypesByKey().then((response) => {
        this.categoryData = response.data
      })
    },
    initData: function() {
      this.getTypesByKeyAction()
      this.getData()
    },
    getData: function() {
      getBusinessTableListJson(this.queryForm).then((response) => {
        this.tableData = response.data
        this.total = parseInt(response.count)
      })
    },
    handleCurrentChange(val) {
      this.queryForm.page = val
      this.getData()
    },
    handleClick(data) {
      this.$router.push({ name: 'businessTableInnerAdd', query: { t: new Date().getTime(), 'id': data.id, 'operate': data.type, 'edit': true }})
    },
    handleDelClick(data) {
      businessTableDel(data.id).then((response) => {
        // eslint-disable-next-line eqeqeq
        if (response.code == 0) {
          this.$message({ 'duration': 800, message: '操作成功', type: 'warning', customClass: 'zZindex' })

          this.getData()
        } else {
          this.$message({ 'duration': 800, message: response.msg, type: 'warning', customClass: 'zZindex' })
        }
      })
    },
    search() {
      this.queryForm.page = 0
      this.queryMethod()
    },
    reset() {
      this.queryForm.name = ''
      this.queryForm.createTime = ''
      this.queryForm.whereSql = ''
      this.queryForm.modelName = ''
      this.queryForm.description = ''
      this.queryForm.tableName = ''
      this.queryForm.type = ''

      this.queryDate = []
      this.getData()
    }

  }

}

</script>
<style lang="scss">
.task-card{
  margin-top: 10px;
}

</style>
